<template>
	<view class="loginBg" :style="{ height: pageH + 'px' }">
		<image mode="widthFix" src="http://s.de123.com/bg.png"></image>
		<view class="topFixed">
			<statusBar></statusBar>
			<view class="ttBarBox">
				<view class="leftBox" @tap="pBack"><text class="leftIcon iconfont icon-back"></text></view>
			</view>
		</view>
		<view class="loginBox">
			<view class="loginTab">
				<view class="tabBox">
					<text :class="['tabItem', isTelLogin ? 'active' : '']" @tap="toggleLoginType">手机号快捷登录</text>
					<text :class="['tabItem', isTelLogin ? '' : 'active']" @tap="toggleLoginType">账号密码登录</text>
				</view>
				<view class="contentBox">
					<view class="tabContent">
						<block v-if="isTelLogin">
							<view class="row">
								<text>+86</text>
								<text class="iconfont icon-unfold"></text>
								<input class="talInput" type="number" placeholder="电话号码" v-model="tel" :adjust-position="true" maxlength="11" />
								<text :class="['getCode', isSendMsg ? 'isSend' : '']" v-text="sendText" @tap="getMsgCode"></text>
							</view>
							<view class="row"><input class="msgCode" type="number" placeholder="请输入验证码" v-model="msgCode" maxlength="6" /></view>
							<text class="tishi">未注册的手机号将自动创建为找培训账号</text>
						</block>
						<block v-else>
							<view class="row"><input class="msgCode" type="text" placeholder="请输用户名" v-model="userName" :adjust-position="true" maxlength="20" /></view>
							<view class="row"><input class="msgCode" type="text" password="true" placeholder="请输入密码" v-model="userPass" maxlength="16" /></view>
							<text class="tishi forgetPass" data-url="getPass" @tap="toPage">忘记密码？</text>
						</block>

						<button class="loginBtn" @tap="login">登录</button>
					</view>
				</view>
			</view>
		</view>
		<view class="otherBox">
			<view class="otherLogin">
				<button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber"><image mode="widthFix" src="../../static/wechat.png"></image></button>
			</view>
			<view class="xieyiBox">
				<text>登录/注册代表您已同意</text>
				<text class="zz" @tap="toPage" :data-url="initInfo.policy">《找培训用户协议》</text>
				<text class="zz" @tap="toPage" :data-url="initInfo.privacy">《隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<script>
import statusBar from "../../components/statusBar/statusBar.vue";
import COMM from "@/common/common.js";
import {
	mapState,
	mapGetters,
	mapMutation,
	mapActions
} from "vuex";
export default {
	components: {
		statusBar
	},
	computed: {
		...mapState({
			initInfo: state => state.sys.initInfo,
			userInfo: state => state.user.userInfo,
			locationCity: state => state.map.locationCity
		})

	},
	data() {
		return {
			pageH: uni.getSystemInfoSync().screenHeight,
			isTelLogin: true,
			tel: '',
			msgCode: '',
			userName: '',
			userPass: '',
			isGetMsg: false,
			sendText: '获取验证码',
			isSendMsg: false,
			thirdList: [],
			cfm: {},
			iosNum: 0,
			isIstWx: false,
			isIstQQ: false,
			userAvat: '',
			sessionKey:'',
			openId:'',
		};
	},
	methods: {
			onGetPhoneNumber(e){
				console.log(e)
				
				// if (e.detail.errMsg == 'getUserInfo:fail user deny') {
				// 	uni.showModal({
				// 		title: '授权提醒',
				// 		content: '使用微信第三方登录必须允许微信权限，请再次点击重新授权',
				// 		showCancel: false,
				// 		cancelText: '',
				// 		confirmText: '确认',
				// 		success: res => {},
				// 		fail: () => {},
				// 		complete: () => {}
				// 	});
				// } else { 
				// 	this.$store.dispatch("apiThirdLogin", {
				// 			openId: this.openId,
				// 			nickname: e.detail.userInfo.nickName
				// 		})
				// 		.then(apiRes => {
				// 			if (apiRes.data.code == 1) {
				// 				setTimeout(() => {
				// 					this.$store.dispatch("timLogin", apiRes.data.data.imid).then(timRes => {})
				// 				}, 1000)
				// 				this.loginJump();
				// 			}
				// 		})
				// }
				
				
				
				
				
				
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {    
					uni.showModal({
						title: '授权提醒',
						content: '使用微信第三方登录必须允许微信权限，请再次点击重新授权',
						showCancel: false,
						cancelText: '',
						confirmText: '确认',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else { 
					this.$store.dispatch("getWxPhone",{
						key:this.sessionKey,
						iv:e.detail.iv,
						code:e.detail.encryptedData
					}).then(res=>{
						this.$store.dispatch("apiThirdLogin", {
								openId: this.openId,
								username: res.purePhoneNumber	//手机号
							})
							.then(apiRes => {
								if (apiRes.data.code == 1) {
									setTimeout(() => {
										this.$store.dispatch("timLogin", apiRes.data.data.imid).then(timRes => {})
									}, 1000)
									this.loginJump();
								}
							})
						
					})
				}
		},
		// 切换登录类型
		toggleLoginType() {
			this.isTelLogin = !this.isTelLogin

		},
		// 手机号+验证码登录
		loginByTel() {
			let rgx = /^1[3456789]\d{9}$/;
			if (!this.tel) {
				uni.showToast({
					title: '请输入手机号码',
					icon: 'none'
				});
			} else if (!rgx.test(this.tel)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
			} else if (!this.isGetMsg) {
				uni.showToast({
					title: '请先获取短信验证码',
					icon: 'none'
				});
			} else if (!this.msgCode) {
				uni.showToast({
					title: '请输入短信验证码',
					icon: 'none'
				});
			} else {
				// 验证登录流程
				this.$store.dispatch("apiUserLogin", {
						username: this.tel,
						code: this.msgCode,
						channel:'mp'
					})
					.then(res => {
						console.log(res);
						setTimeout(() => {
							this.$store.dispatch("timLogin", res.data.data.imid).then(timRes => {});
							this.$store.dispatch("eidtUserInfo",{
								userId:res.data.data.userId,
								city:parseInt(this.locationCity.adcode),
								version:'MP'
							})
						}, 500)
						this.loginJump();
					})
			}
		},
		// 用户名+密码登录
		loginByName() {
			if (!this.userName) {
				uni.showToast({
					title: '请输入用户名',
					icon: 'none'
				});
			} else if (!this.userPass) {
				uni.showToast({
					title: '请输入密码',
					icon: 'none'
				});
			} else {

				// 在这里写用户名登录接口处理
				this.$store.dispatch("apiUserLogin", {
						username: this.userName,
						password: this.userPass
					})
					.then(res => {					
						setTimeout(() => {
							console.log(res)
							this.$store.dispatch("timLogin", res.data.data.imid).then(timRes => {});
							this.$store.dispatch("eidtUserInfo",{
								userId:res.data.data.userId,
								city:parseInt(this.locationCity.adcode),
								version:'MP'
							})
						}, 1000)
						this.loginJump();

					})
			}
		},
		login() {
			if (this.isTelLogin) {
				this.loginByTel()
			} else {
				this.loginByName()
			}
		},
		// 获取短信验证码
		getMsgCode() {
			if (!this.isSendMsg) {
				let rgx = /^1[3456789]\d{9}$/;
				if (!this.tel) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					});
				} else if (!rgx.test(this.tel)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
				} else {
					this.isGetMsg = true; //修改状态
					let t = 60;
					this.sendText = t + "秒"
					this.isSendMsg = true;

					this.$store.dispatch("apiSendMsgCode", {
						phone: this.tel,
						type: '2'
					}).then(res => {
						const itval = setInterval(() => {
							t--;
							if (t < 1) {
								t = 60;
								this.sendText = "获取验证码"
								this.isSendMsg = false;
								clearInterval(itval);
							} else {
								this.isSendMsg = true;
								this.sendText = t + "秒"
							}
						}, 1000)
					})

				}
			} else {
				uni.showToast({
					title: '发送的间隔太短啦，请稍后再试',
					icon: 'none'
				});
			}
		},

		loginJump() {
			if (this.cfm.to == "car") { //去购物车
				uni.redirectTo({
					url: "/pagesA/car/car"
				})
			} else if (this.cfm.to == 'addCar') { //添加商品到购物车
				this.$store.dispatch("apiAddGoodToCar", {
					userId: this.userInfo.userId,
					courseId: this.cfm.gid,
					num: 1
				}).then(res => {
					uni.navigateBack({
						delta: 1
					})
					setTimeout(() => {
						uni.showToast({
							title: '添加成功',
							icon: 'success'
						});
					}, 1500)

				})
			} else if (this.cfm.to == "confirmOrder") { //到提交订单页面
				if (this.cfm.isGroup) {
					uni.redirectTo({
						url: "/pagesA/confirmOrder/confirmOrder?isGroup=1&acId=" + this.cfm.acId
					})
				} else if (this.cfm.isLm) {
					uni.redirectTo({
						url: "/pagesA/confirmOrder/confirmOrder?isLm=1&actId="+this.actId
					})
				} else {
					uni.redirectTo({
						url: "/pagesA/confirmOrder/confirmOrder"
					})
				}

			} else {
				// this.toPage('index');
				uni.navigateBack({
					delta: 1
				})
			}
		}
	},
	onLoad(cfm) {
		this.cfm = cfm;
		this.actId = cfm.actId;
		this.$store.dispatch("loginByWexin").then(res=>{
			this.sessionKey=res.data.data.session_key;
			this.openId=res.data.data.unionid?res.data.data.unionid:res.data.data.openid
		})
	}
}
</script>

<style lang="less">
page {
	height: 100%;
}

.loginBg {
	width: 100%;
	height: 100%;

	image {
		width: 100%;
	}

	.overMask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99;
	}
}

.topFixed {
	position: fixed;
	width: 100%;
	z-index: 999;
	height: 90upx;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0);
}

.ttBarBox {
	display: flex;
	align-items: center;
	width: 100%;
	height: 90upx;
	color: #ffffff;
	left: 0;
	position: relative;
	padding: 0 34upx;
	background-color: rgba(0, 0, 0, 0);

	.leftBox {
		display: flex;
		position: absolute;
		height: 100%;
		padding: 0 20upx;
		z-index: 999;
		align-items: center;
		top: 0;
		left: 0;
		line-height: 90upx;

		.leftIcon {
			font-size: 40upx;
			margin-right: 10upx;
		}
	}

	.rightBox {
		display: flex;
		position: absolute;
		height: 100%;
		padding: 0 20upx;
		z-index: 999;
		align-items: center;
		top: 0;
		right: 0;
		/* #ifdef MP */
		right: 27%;
		/* #endif */

		line-height: 70upx;

		.rightIcon {
			font-size: 24upx;
		}

		.rightText {
			font-size: 24upx;
			color: #ffffff;
		}
	}
}

.status_bar {
	height: var(--status-bar-height);
	width: 100%;
	background-color: rgba(0, 0, 0, 0);
}

.loginBox {
	top: 22%;
	width: 100%;
	position: absolute;
	display: flex;
	justify-content: center;

	.loginTab {
		width: 80%;
		background-color: #ffffff;
		box-shadow: 0upx 4upx 42upx 0upx rgba(242, 192, 105, 0.5);
		border-radius: 21upx;
		padding: 54upx 36upx 80upx 36upx;
		display: flex;
		flex-direction: column;

		.tabBox {
			display: flex;
			align-items: center;
			justify-content: space-around;

			.tabItem {
				flex-grow: 0;
				flex-shrink: 0;
				text-align: center;
				display: inline-block;
				padding-bottom: 18upx;
				font-size: 30upx;
				font-weight: bold;
				color: #3b434d;
				border-bottom: 2px solid #ffffff;
			}

			.active {
				color: #ff9c27;
				border-bottom: 2px solid #ff9c27;
			}
		}

		.contentBox {
			padding-top: 38upx;

			.tabContent {
				display: flex;
				flex-direction: column;
				align-items: stretch;

				.row {
					display: flex;
					flex-direction: row;
					align-items: center;
					height: 98upx;
					border-radius: 10upx;
					border: solid 1upx #dedede;
					padding: 0 16upx;
					margin-top: 28upx;

					text {
						font-size: 26upx;
						color: #9c9c9c;
					}

					.iconfont {
						font-size: 28upx;
						line-height: 24upx;
						margin-left: 6upx;
					}

					.getCode {
						font-size: 26upx;
						color: #ed5614;
						text-align: right;
						flex-grow: 1;
					}

					.isSend {
						color: #9c9c9c;
					}

					.talInput {
						font-size: 26upx;
						color: #9c9c9c;
						width: 50%;
						margin-left: 10upx;
					}

					.msgCode {
						font-size: 26upx;
						color: #9c9c9c;
						padding-left: 10upx;
						width: 100%;
					}
				}

				.tishi {
					margin-top: 12upx;
					font-size: 22upx;
					color: #959595;
				}

				.forgetPass {
					color: #ffcd11;
				}

				.loginBtn {
					width: 100%;
					height: 88upx;
					color: #ffffff;
					line-height: 88upx;
					background-image: linear-gradient(0deg, #f6b423 0%, #fbdc2e 100%), linear-gradient(#f7bd26, #f7bd26);
					background-blend-mode: normal, normal;
					box-shadow: 0rpx 4upx 13upx 1upx rgba(255, 181, 51, 0.5);
					border-radius: 44upx;
					border: none;
					margin-top: 100upx;
				}

				.loginBtn:after {
					border: none;
				}
			}
		}
	}
}

.otherBox {
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;

	.xieyiBox {
		margin-bottom: 52upx;
		text-align: center;

		text {
			font-size: 22upx;
			color: #777777;
		}

		.zz {
			color: #ffcd11;
		}
	}

	.otherLogin {
		display: flex;
		justify-content: center;
		margin-bottom: 8.7%;

		button {
			background-color: rgba(0, 0, 0, 0);
			width: 90upx;
			height: 90upx;
			padding: 0;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		image {
			width: 84upx;
			height: 84upx;
		}
	}
}
</style>
